import 'package:flutter/material.dart';

/// Flutter导航和路由示例
class NavigationRoutingExample extends StatelessWidget {
  const NavigationRoutingExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter 导航和路由'), backgroundColor: Theme.of(context).colorScheme.inversePrimary),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 说明卡片
            Card(
              color: Colors.indigo.shade50,
              child: const Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('🧭 导航和路由概述', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    SizedBox(height: 8),
                    Text(
                      'Flutter导航方式：\n'
                      '• Navigator.push：基础导航\n'
                      '• 命名路由：MaterialApp routes\n'
                      '• 参数传递：构造函数和arguments\n'
                      '• 返回数据：Navigator.pop\n'
                      '• go_router：现代路由方案（综合App使用）',
                      style: TextStyle(fontSize: 14),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 基础导航
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('1. 基础导航（Navigator.push）', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(8)),
                      child: const Text('''// 跳转到新页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(),
  ),
);

// 返回上一页
Navigator.pop(context);

// 替换当前页面
Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => NewPage(),
  ),
);''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                    ),
                    const SizedBox(height: 12),
                    FilledButton.icon(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const _DetailPage(title: '基础导航示例', message: '这是通过Navigator.push跳转的页面'),
                          ),
                        );
                      },
                      icon: const Icon(Icons.arrow_forward),
                      label: const Text('跳转到详情页'),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 参数传递
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('2. 参数传递', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(8)),
                      child: const Text('''// 方式1: 构造函数传参
class DetailPage extends StatelessWidget {
  final String title;
  final int id;
  
  const DetailPage({
    required this.title,
    required this.id,
  });
}

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(
      title: '详情',
      id: 123,
    ),
  ),
);''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                    ),
                    const SizedBox(height: 12),
                    FilledButton.icon(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const _DetailPage(title: '参数传递示例', message: '这是通过构造函数传递的参数', id: 42),
                          ),
                        );
                      },
                      icon: const Icon(Icons.send),
                      label: const Text('传递参数'),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 返回数据
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('3. 返回数据', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(8)),
                      child: const Text('''// 跳转并等待返回结果
final result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SelectionPage(),
  ),
);

print('选择的结果: \$result');

// 在目标页面返回数据
Navigator.pop(context, '返回的数据');''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                    ),
                    const SizedBox(height: 12),
                    FilledButton.icon(
                      onPressed: () async {
                        final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => const _SelectionPage()));

                        if (context.mounted && result != null) {
                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('你选择了: $result')));
                        }
                      },
                      icon: const Icon(Icons.select_all),
                      label: const Text('选择并返回结果'),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 命名路由
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('4. 命名路由', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(8)),
                      child: const Text('''// 在MaterialApp中定义路由
MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/details': (context) => DetailsPage(),
    '/settings': (context) => SettingsPage(),
  },
);

// 使用命名路由跳转
Navigator.pushNamed(context, '/details');

// 传递参数
Navigator.pushNamed(
  context,
  '/details',
  arguments: {'id': 123, 'title': '标题'},
);

// 在目标页面接收参数
final args = ModalRoute.of(context)!.settings.arguments 
    as Map<String, dynamic>;''', style: TextStyle(fontFamily: 'monospace', fontSize: 11)),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 其他导航操作
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('5. 其他导航操作', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(8)),
                      child: const Text('''// 返回到根页面
Navigator.popUntil(context, (route) => route.isFirst);

// 替换路由栈
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
  (route) => false, // 移除所有页面
);

// 判断是否可以返回
bool canPop = Navigator.canPop(context);

// 模态底部表单
showModalBottomSheet(
  context: context,
  builder: (context) => Container(),
);

// 对话框
showDialog(
  context: context,
  builder: (context) => AlertDialog(),
);''', style: TextStyle(fontFamily: 'monospace', fontSize: 11)),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 对话框演示
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('对话框和底部表单', style: TextStyle(fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Wrap(
                      spacing: 8,
                      runSpacing: 8,
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            showDialog(
                              context: context,
                              builder: (context) => AlertDialog(
                                title: const Text('提示'),
                                content: const Text('这是一个对话框'),
                                actions: [
                                  TextButton(onPressed: () => Navigator.pop(context), child: const Text('取消')),
                                  FilledButton(onPressed: () => Navigator.pop(context), child: const Text('确定')),
                                ],
                              ),
                            );
                          },
                          child: const Text('显示对话框'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            showModalBottomSheet(
                              context: context,
                              builder: (context) => Container(
                                padding: const EdgeInsets.all(16),
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    const Text('底部表单', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                                    const SizedBox(height: 16),
                                    ListTile(
                                      leading: const Icon(Icons.photo),
                                      title: const Text('相册'),
                                      onTap: () => Navigator.pop(context),
                                    ),
                                    ListTile(
                                      leading: const Icon(Icons.camera),
                                      title: const Text('相机'),
                                      onTap: () => Navigator.pop(context),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                          child: const Text('显示底部表单'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 现代路由方案
            Card(
              color: Colors.purple.shade50,
              child: const Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('现代路由方案：', style: TextStyle(fontWeight: FontWeight.bold)),
                    SizedBox(height: 8),
                    Text('• go_router - 声明式路由，支持深链接'),
                    Text('• auto_route - 代码生成路由'),
                    Text('• fluro - 传统路由增强'),
                    SizedBox(height: 8),
                    Text(
                      '在"综合实战App"中会使用go_router演示！',
                      style: TextStyle(fontWeight: FontWeight.bold, color: Colors.purple),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 详情页面
class _DetailPage extends StatelessWidget {
  const _DetailPage({required this.title, required this.message, this.id});

  final String title;
  final String message;
  final int? id;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title), backgroundColor: Theme.of(context).colorScheme.inversePrimary),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('页面信息', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 12),
                    Text('标题: $title'),
                    Text('消息: $message'),
                    if (id != null) Text('ID: $id'),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16),
            FilledButton.icon(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: const Icon(Icons.arrow_back),
              label: const Text('返回上一页'),
            ),
          ],
        ),
      ),
    );
  }
}

// 选择页面
class _SelectionPage extends StatelessWidget {
  const _SelectionPage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择一个选项'), backgroundColor: Theme.of(context).colorScheme.inversePrimary),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text('点击任意选项返回', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          const SizedBox(height: 16),
          ...['选项 A', '选项 B', '选项 C', '选项 D'].map((option) {
            return Card(
              child: ListTile(
                title: Text(option),
                trailing: const Icon(Icons.arrow_forward),
                onTap: () {
                  // 返回选择的结果
                  Navigator.pop(context, option);
                },
              ),
            );
          }),
        ],
      ),
    );
  }
}
